<template>
	<view style="color: #fff;">
		<uni-popup ref="popup" type="top">
			<view @click="closePopup" class="">
				<view class="status_bar">

				</view>
				<view class="nav_bar">
				</view>
				<view class="py-3">
					<view class="" style="height:34rpx;">

					</view>
				</view>
			</view>
			<view class="popupWrap flex-1 A-Medium" :class="model=='light'?'popupWrapLight':''">
				<view class="timeWrap flex align-center justify-between">
					<view @click="type=1" class="time flex align-center justify-center" :class="{ 'date-active' : type == 1 && model != 'light', 'date-active-light' : type == 1 && model == 'light'}">
						{{startDate}}
					</view>
					<view @click="type=2" class="time flex align-center justify-center" :class="{ 'date-active' : type == 2 && model != 'light', 'date-active-light' : type == 2 && model == 'light'}">
						{{endDate}}
					</view>
				</view>
				<picker-view class="picker-view" :mask-style="maskStyle" :indicator-style="indicatorStyle"
					:value="value" @change="bindChange" :mask-top-style="maskTopStyle"
					:mask-bottom-style="maskBottomStyle">
					<picker-view-column class="picker-view-column">
						<view class="item" v-for="(item,index) in 100" :key="index"><text
								class="text">{{1989+item}}{{i18n.c004}}</text></view>
					</picker-view-column>
					<picker-view-column class="picker-view-column">
						<view class="item" v-for="(item,index) in 12" :key="index"><text
								class="text">{{item<10?'0'+item:item}}{{i18n.c005}}</text>
						</view>
					</picker-view-column>
					<picker-view-column class="picker-view-column">
						<view class="item" v-for="(item,index) in days" :key="index"><text
								class="text">{{item<10?'0'+item:item}}{{i18n.c006}}</text>
						</view>
					</picker-view-column>
				</picker-view>
				<view class="btnWrap flex align-center justify-between">
					<view @click="chongzhi" class="btn1 flex align-center justify-center">
						{{i18n.c007}}
					</view>
					<view @click="confirm" style="" class="btn2 flex align-center justify-center">
						{{i18n.c008}}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	import {
		getCoinTypeList
	} from '@/core/api/index.js';
	export default {
		name: "bzPoup",
		props: {

		},
		created() {
			getCoinTypeList({}).then(res => {
				let list = res.result;
				this.list = list;
			})
		},
		data() {
			return {
				maskBottomStyle: '',
				maskTopStyle: '',
				maskStyle: 'background:#1F2128;opacity: 0;',
				indicatorStyle: 'background:#1F2128;opacity: .3;height: 50px;',
				value: [5, 5, 5],
				days: '',
				startDate: 'xxxx-xx-xx',
				endDate: 'xxxx-xx-xx',
				type:1,//1startDate 2endDate
			};
		},
		created() {
			const now = new Date();
			const year = now.getFullYear();
			const month = now.getMonth() + 1;
			const day = now.getDate();
			this.value[0] = year - 1990;
			this.value[1] = month - 1;
			this.value[2] = day - 1;
			this.days = this.getDaysInMonth(1990 + this.value[0], 1 + this.value[1]);
			this.startDate = year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0');
			this.endDate = year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0');
		},
		computed: {
			i18n() {
				return this.$t('component');
			},
			model() {
				return this.$store.state.config.model;
			}
		},
		methods: {
			getDaysInMonth(year, month) {
				// 在JavaScript中，月份是从0开始的，所以1月是0，2月是1，以此类推。
				// 因此，我们需要将传入的月份减去1。
				if (month >= 0 && month <= 11) {
					month++; // 调整月份以符合常规认知（1月为1，2月为2等）
				}
				// 创建一个日期对象，设置为下一个月的第一天，然后减去一天，得到上个月最后一天
				return new Date(year, month, 0).getDate();
			},
			bindChange(e) {
				console.log(e.detail.value);
				this.days = this.getDaysInMonth(1990 + e.detail.value[0], e.detail.value[1]);
				if(this.type==1){
					this.startDate = (1990 + e.detail.value[0]) + '-' + String(1 + e.detail.value[1]).padStart(2, '0') + '-' +
						String(1 + e.detail.value[2]).padStart(2, '0');
				}
				if(this.type==2){
					this.endDate = (1990 + e.detail.value[0]) + '-' + String(1 + e.detail.value[1]).padStart(2, '0') + '-' +
						String(1 + e.detail.value[2]).padStart(2, '0');
				}
			},
			open() {
				this.$refs.popup.open('top');
			},
			confirm(e) {
				this.$emit('confirm', {
					startDate: this.startDate,
					endDate: this.endDate
				});
				this.closePopup();
			},
			chongzhi(){
				this.closePopup();
				this.$emit('confirm', {
					startDate: '',
					endDate: ''
				});
				const now = new Date();
				const year = now.getFullYear();
				const month = now.getMonth() + 1;
				const day = now.getDate();
				this.value[0] = year - 1990;
				this.value[1] = month - 1;
				this.value[2] = day - 1;
				this.days = this.getDaysInMonth(1990 + this.value[0], 1 + this.value[1]);
				this.startDate = year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0');
				this.endDate = year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0');
			},
			closePopup() {
				this.$refs.popup.close();
			},
		}
	}
</script>

<style scoped lang="scss">
	.picker-view {
		height: 500rpx;
	}

	.picker-view-column {
		.item {
			height: 50px;
			line-height: 50px;
			text-align: center;
		}
	}

	.popupWrap {
		background: #0E0F11;
		font-size: 32rpx;
		color: #F7F7F7;

		.titleWrap {
			margin-bottom: 6rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.timeWrap {
			padding: 46rpx 48rpx;

			.time {
				width: 254rpx;
				height: 80rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #1F2128;
			}
		}

		.btnWrap {
			padding: 46rpx 48rpx;

			.btn1 {
				width: 276rpx;
				height: 80rpx;
				background: #7F838D;
				border-radius: 74rpx 74rpx 74rpx 74rpx;
				font-size: 28rpx;
				color: #F7F7F7;
			}

			.btn2 {
				width: 276rpx;
				height: 80rpx;
				background: #5951BA;
				border-radius: 74rpx 74rpx 74rpx 74rpx;
				font-size: 28rpx;
				color: #F7F7F7;
			}
		}

		.timeWrapLight {
			.time {
				width: 254rpx;
				height: 80rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #B5B7BF;
			}
		}

		.list {
			border-bottom: 2rpx solid #1F2128;
		}

		.listLight {
			border-bottom: 2rpx solid #F4F4F4;
		}
	}

	.popupWrapLight {
		background: #ffffff;
		color: #0E0F11;
	}
	
	.date-active {
		background-color: #383838;
	}
	
	.date-active-light {
		background-color: #bebebe;
	}
</style>